<div id="imageModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="ri-image-line"></i> 图片处理</h2>
            <button class="close-btn"><i class="ri-close-line"></i></button>
        </div>
        <div class="modal-body">
            <div class="image-upload-container">
                <div class="upload-buttons">
                    <button id="selectImage" class="upload-btn">
                        <i class="ri-upload-line"></i>
                        <span>选择图片</span>
                    </button>
                    <button id="copyBase64" class="upload-btn" disabled>
                        <i class="ri-file-copy-line"></i>
                        <span>复制Base64</span>
                    </button>
                </div>
                
                <div class="drop-zone" id="dropZone">
                    <i class="ri-upload-cloud-line"></i>
                    <p>拖放图片到此处或点击选择图片</p>
                    <input type="file" id="imageInput" accept="image/*" style="display: none;">
                </div>

                <div class="preview-container" id="previewContainer" style="display: none;">
                    <div class="preview-header">
                        <div class="preview-title">
                            <i class="ri-image-2-line"></i>
                            <span>图片预览</span>
                        </div>
                    </div>
                    
                    <div class="image-preview-wrapper">
                        <img id="imagePreview" class="image-preview">
                    </div>
                    
                    <div class="base64-section">
                        <div class="base64-header">
                            <div class="base64-title">Base64编码</div>
                        </div>
                        <textarea id="base64Output" class="base64-output" readonly placeholder="Base64编码将在此显示..."></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('imageModalContainer').innerHTML = document.getElementById('imageModal').outerHTML;
</script> 